<!-- setup -->
<!--
 1.setup 比 beforeCreate 还要早
 2.因为它比 beforeCreate 还要早，所以说 setup 中拿不到 this
 3.数据和函数，需要在 setup 最后 return，模板中才能使用
 4.但是每次都 return 太麻烦了
    => 可以在 script 标签内设置一个 setup 语法糖，最后写的所有数据和方法都给你 return 了
-->
<!--<script>
export default {
    setup() {
        // 数据
        const msg = 'hello vue3'
        // 函数
        const logMessage = () => {
            console.log(msg)
        }
        console.log('setup 执行了...', this)

        return {
            msg,
            logMessage
        }
    },
    beforeCreate() {
        console.log('beforeCreate 执行了...')
    }
}
</script>-->

<script setup>
// 数据
const msg = 'hello vue3'
// 函数
const logMessage = () => {
    console.log(msg)
}
</script>

<template>
    <div>Vue3-Study</div>
    <div>{{ msg }}</div>
    <button @click="logMessage">打印msg</button>
</template>